<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Hello</title>

    <!-- Bootstrap -->
    <script src="../bootstrap/js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../bootstrap/js/bootstrap.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <style>
        .inner{
            border: rgba(148,0,11,0.71) 2px solid;
        }
    </style>
</head>
<body>
<h1 align="center">你好，世界！</h1>
<!--栅格系统-->
<div class="container">
    <div class="row">
        <div class="col-lg-1 col-sm-2 col-xs-3 inner">青岛</div>
        <div class="col-lg-1 col-sm-2 col-xs-3 inner">济南</div>
        <div class="col-lg-1 col-sm-2 col-xs-3 inner">菏泽</div>
        <div class="col-lg-1 col-sm-2 col-xs-3 inner">聊城</div>
        <div class="col-lg-1 col-sm-2 col-xs-3 inner">兖州</div>
        <div class="col-lg-1 col-sm-2 col-xs-3 inner">徐州</div>
        <div class="col-lg-1 col-sm-2 col-xs-3 inner">荆州</div>
        <div class="col-lg-1 col-sm-2 col-xs-3 inner">益州</div>
        <div class="col-lg-1 col-sm-2 col-xs-3 inner">淄博</div>
        <div class="col-lg-1 col-sm-2 col-xs-3 inner">泰安</div>
        <div class="col-lg-1 col-sm-2 col-xs-3 inner">东营</div>
        <div class="col-lg-1 col-sm-2 col-xs-3 inner">潍坊</div>
    </div>
</div>
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
<!--响应式图片-->
<img src="../img/banner_1.jpg" class="img-responsive center-block"/>
<!--圆图片-->
<img src="../img/banner_2.jpg" class="img-circle img-responsive center-block"/>

<img src="../img/banner_3.jpg" class="img-rounded img-responsive center-block"/>
<img src="../img/banner_1.jpg" class="img-thumbnail img-responsive center-block"/>
<br>
<table class="table table-striped table-bordered table-hover">
    <tr class="active">
        <th>#编号</th>
        <th>姓名</th>
        <th>年纪</th>
    </tr>
    <tr>
        <th>001</th>
        <th>lucy</th>
        <th>14</th>
    </tr>
    <tr>
        <th>002</th>
        <th>mike</th>
        <th class="active">18</th>
    </tr>
    <tr>
        <th>003</th>
        <th>cook</th>
        <th>15</th>
    </tr>
</table>
<br><br>
<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
</html>